<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
    }
    /*设置outer 的样式*/
    #outer
    {
        /*设置宽和高*/
        width:520px;
        height: 333px;
        /*居中*/
        margin: 50px auto;
        background-color: yellow;
        padding: 10px 0;
        position: relative;
        /*裁剪溢出的内容*/
        overflow: hidden;
    }
    /*设置imglist的样式*/
    #imglist
    {
        /*去除项目符号*/
        list-style: none;
        /*设置ul的宽度*/
        width: 2600px;
        position: absolute;
        /*设置偏移量*/
        left: 0px;/*初始偏移量50px，后续一张图的偏移量是520px*/
    }
    /*设置图片中的li*/
    #imglist li
    {
        /*把li进行横向序列*/
        float: left;
        /*设置左右外边距*/
        margin: 0 10px;
    }
    /*设置图片规格*/
    #imgstyle
    {
        width: 500px;
        height: 333px;
    }
    /*设置导航按钮*/
    #navDiv
    {
        /*开启绝对定位*/
        position: absolute;
        /*设置位置*/
        bottom: 15px;
        /*设置left值，outer宽度520，navDiv宽度25*5=125px*/
        left:197px

    }
    #navDiv a
    {
        /*设置超链接浮动*/
        float: left;
        /*设置超链接的宽和高*/
        display: block;
        width: 15px;
        height: 15px;
        /*设置背景颜色*/
        background-color: red;
        /*设置左右外边距*/
        margin: 0 5px;
        /*设置透明*/
        opacity: 0.5;
    }
    /*设置鼠标移入的效果*/
    #navDiv a:hover
    {
        background-color: black;
    }
    </style>

    <script type="text/javascript" src="../js/元素方块的简单操作.js"></script>
    <script type="text/javascript">
    window.onload=function()
    {
        //设置imglist的宽度
        //获取imglist的宽度
        var imglist=document.getElementById("imglist");

        //获取页面中所有的img标签
        var imgArr=document.getElementsByTagName("img");

        //设置imglist的宽度
        imglist.style.width=520*imgArr.length+"px";

        //设置导航按钮居中
        //获取navDiv
        var navDiv=document.getElementById("navDiv");
        //获取outer
        var outer=document.getElementById("outer");
        //设置navDiv的left值
        navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2 +"px";

        //，默认显示图片的索引
        var index=0;
        //获取所有的a
        var allA=document.getElementsByTagName("a");
        //设置默认选中的效果
        allA[index].style.backgroundColor="black";

        //以上是准备工作，下面开始设置功能
        //点击超链接就能切换到指定的图片
        //点击第一个超链接，显示第一个，以此类推
        //为所有的超链接都绑定单击响应函数
        for(let i=0;i<allA.length;i++)
        {
            allA[i].onclick=function()
            {
                //在点击的同时，关闭自动切换的定时器
                clearInterval(timer);

                //如果为每一个超链接都添加一个num属性
                //allA[i].num=i;如果定义了这个变量，那么就可以使用var来进行遍历
                //获取点击的超链接的索引
                console.log(i);
                index=i;
                //切换图片
                //第一张 0 0
                //第二张1 -520
                //第三章2 -1040
                //imglist.style.left=index*(-520)+"px";引入外部JS，也就是之前写过的move方法
                //修改被选中的超链接a
                //allA[index].style.backgroundColor="black";
                //此方法有BUG，点了之后变黑，但是不会自动变回去
                setA();

                //使用move函数
                move(imglist,"left",-520*index,20,function()
                {
                    //动画执行完毕，开启自动切换
                    autoChange();
                });
            };
        }

        //开启自动切换
        autoChange();

        //写一个变红变黑的方法，因为此方法仅在内部使用，所以卸载onload里面
        function setA()
        {
            //判断当前索引是否是最后一张图片
            if(index >= imgArr.length-1)
            {
                //则index设置为0
                index=0;

                //此时现实的最后一张图片，而最后一张图片和第一张图片是一模一样的
                //通过css将最后一张切换成第一章
                imglist.style.left=0;
            }
            //遍历所有a，并将它们的背景颜色设置为红色
            for(var i=0;i<allA.length;i++)
            {
                allA[i].style.backgroundColor="";//把内联样式设置为空串，然后div的样式成为默认
            }

            //将选中的a设置为黑色
            allA[index].style.backgroundColor="black";
        }

        //设置一个定时器变量
        var timer;
        //创建一个函数，用来开启自动切换图片
        function autoChange()
        {
            //开启一个定时器，用来定时去切换图片
            timer=setInterval(function()
            {
                //使索引进行自增
                index++;
                //判断index的值
                index=index % imgArr.length;
                //执行动画，切换图片
                //这样存在一个体验问题，div移动的时间也算在定时器时间里面了
                //切换到最后一张图后，会进行向右平移到第一张，这样会严重影响视觉效果
                //需要进行修改，来让切换到最后一张图后，继续向左平移但是图片是从第一张展示
                move(imglist,"left",-520*index,20,function()
                {
                    //修改导航按钮
                    setA();
                });
            },3000);
        }
    };
    </script>
</head>
<body>
    <!--创建一个外部的div，来作为一个大的容器-->
    <<div id="outer">
        <!--创建一个ul，用来放置图片-->
        <ul id="imglist">
            <li><img src="../伊蕾娜素材EN/img01.jpeg" id="imgstyle"></li>
            <li><img src="../伊蕾娜素材EN/img02.jpg" id="imgstyle"></li>
            <li><img src="../伊蕾娜素材EN/img03.jpg" id="imgstyle"></li>
            <li><img src="../伊蕾娜素材EN/img04.jpg" id="imgstyle"></li>
            <li><img src="../伊蕾娜素材EN/img05.jpg" id="imgstyle"></li>
            <li><img src="../伊蕾娜素材EN/img01.jpeg" id="imgstyle"></li>
        </ul>
        <!--创建导航按钮-->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>